<template>
  <div class="page-gird-container">
    <div class="bg-color-body-gray">
      <Form label-width="100">
        <Row>
          <Col span="6">
            <FormItem label="GUID：">
              <Input placeholder="请输入" style="width: 250px"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="IP地址：">
              <Input placeholder="请输入" style="width: 250px"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="终端用户ID：">
              <Input placeholder="请输入" style="width: 250px"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="线路：">
              <Input style="width: 250px"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="订单状态：">
              <Input style="width: 250px"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="运行状态：">
              <Input style="width: 250px"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="运行状态：">
              <DatePicker
                type="daterange"
                :start-date="new Date()"
                placement="bottom-end"
                placeholder="起止时间"
                style="width: 250px"
              />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem>
              <Button type="primary" style="margin-right: 8px">搜索</Button>
              <Button>导出/下载</Button>
              <div>
                <span class="cursign" style="margin-right: 10px"
                  >重置筛选条件</span
                >
                <span class="cursign">自定义列表项</span>
              </div>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <Table :columns="columns" ></Table>
  </div>
</template>

<script>
import { Form } from "view-ui-plus";

export default {
  name: "container",
  components: { Form },
  data() {
    return {
      columns: [
        {
          title: "GUID",
          key: "ID",
        },
        {
          title: "状态",
          key: "state",
        },
        {
          title: "链接地址",
          key: "address",
        },
        {
          title: "账号",
          key: "account",
        },
        {
          title: "密码",
          key: "password",
        },
        {
          title: "地区",
          key: "area",
        },
        {
          title: "项目",
          key: "project",
        },
        {
          title: "节点IP",
          key: "IP",
        },
        {
          title: "自动续费",
          key: "autoRenewal",
        },
        {
          title: "分组名称",
          key: "groupName",
        },
        {
          title: "创建时间",
          key: "creationTime",
        },
        {
          title: "到期时间",
          key: "expiryTime",
        },
        {
          title: "备注",
          key: "remark",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  box-sizing: border-box;
  background-color: #fff;
  .bg-color-body-gray {
    background-color: #f3f4f5;
    padding: 16px 16px 0;
    margin-bottom: 24px;
  }
}
.ivu-col {
  display: flex;
}
.cursign {
  cursor: pointer;
  color: #08f;
}
</style>
